*{
    margin:0;
    padding:0;
}
body{
    background:rgba(20,45,78,0.1);
    height:400px;
    width:400px;
}
#box{
    position: absolute;
	left: 40%;
	top:30%;
	--s:rgba(243, 156, 18,0.8);
	--e:rgba(26, 188, 156,0.9);
	--m:rgba(41, 128, 185,0.8);
	--me:rgba(0,204,255,0.8);
	--ma:rgba(255,0,51,0.7);
}
.sun{
    position:absolute;
    background:var(--s);
    width:50px;
    height:50px;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--s),
                0 0 20px var(--s),
                0 0 40px var(--s),
                0 0 80px var(--s);
    animation: roll 36s linear infinite;
}
@keyframes roll{
    100%{
        transform:rotateZ(360deg);
    }
}
.sun::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    border:1px solid white;
    border-radius: 50%;
    z-index:-1;
}
.earth{
    position: absolute;
    background:var(--e);
    width:25px;
    height:25px;
    left:85px;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--e),
                0 0 20px var(--e),
                0 0 30px var(--e),
                0 0 40px var(--e);
    animation:roll 15s linear infinite;
}
.earth::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:100px;
    height:100px;
    border:1px solid gray;
    border-radius: 50%;
}
.moon{
    position: absolute;
    background:var(--m);
    width:17px;
    height:17px;
    left:54px;
    border-radius: 50%;
    box-shadow: 0 0 5px var(--m),
                0 0 10px var(--m),
                0 0 20px var(--m);
	animation:roll 9s linear infinite;
}
.moon::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	width:50px;
	height:50px;
	border:1px solid gray;
	border-radius: 50%;
}
.Mercury{
	position: absolute;
	background:var(--me);
	width:8px;
	height:8px;
	left:30px;
	border-radius: 50%;
	box-shadow: 0 0 2px var(--me),
	            0 0 4px var(--me),
	            0 0 8px var(--me);
	animation:roll 3s linear infinite;
}
.Mercury::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	width:25px;
	height:25px;
	border:1px solid gray;
	border-radius: 50%;
}

.Mars{
	position: absolute;
	background:var(--ma);
	width:3px;
	height:3px;
	left:15px;
	border-radius: 50%;
	box-shadow: 0 0 1px var(--ma),
	            0 0 2px var(--ma),
	            0 0 4px var(--ma);
}


